<template>
  <view class="develop-timeline">
    <view class="wrap" v-if="developTimelineList.length !== 0">
      <view class="w-item" v-for="(item,i) in developTimelineList" :key="i">
        <view class="time">{{ black_Get(item,'keyTime') | timeFilter }}</view>
        <view class="event">
          <view class="title">{{ black_Get(item,'title') }}</view>
          <view class="content">
            <uParse :content="item.content" @preview="preview"></uParse>
          </view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <a-empty
      v-if="developTimelineList.length === 0"
      :src="'empty/order.png'|prefixOssUrl"
      :tips="['暂无相关信息，请后续关注留意']"
    ></a-empty>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
import uParse from '@/components/gaoyia-parse/parse'
import {
  model
} from '@/model';

const {
  AxqDevelopTimeline
} = model.collection;
export default {
  components: {
    uParse
  },
  mixins: [],
  props: {},
  data () {
    return {
      developTimelineList: [],
    }
  },
  onLoad () {
    this.getDevelopTimeline()
  },
  filters: {
    timeFilter (v) {
      return v.slice(0, 4) + '年' + v.slice(5, 7) + '月'
    }
  },
  methods: {
    getDevelopTimeline () {
      AxqDevelopTimeline.sendApi('developTimelineList', {
        params: {},
        data: {}
      }).then(res => {
        const { status, data } = res;
        if (status) {
          this.developTimelineList = data;
        }
      })
    },
  }
}
</script>

<style lang="less">
.develop-timeline {
  background: @background-color-base;
  min-height: 100vh;
  padding: 85rpx 73rpx @box-gap @box-gap;

  .wrap {
    position: relative;
    padding: 50rpx 0;

    .w-item {
      .flexLayout();

      .time {
        padding: 8rpx 0;
        width: 200rpx;
        padding-right: 75rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        box-shadow: border-box;
        text-align: right;
      }

      .event {
        font-size: 0;

        .title {
          width: 400rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }

        .content {
          margin-top: 23rpx;
          margin-bottom: 47rpx;
          width: 400rpx;
          border-radius: 20rpx;
          overflow: hidden;
        }
      }
    }

    .line {
      position: absolute;
      height: 100%;
      left: 196rpx;
      width: 4rpx;
      top: 50%;
      transform: translateY(-50%);
      background: @color-theme;

      &::before {
        content: "";
        position: absolute;
        top: -28rpx;
        left: 50%;
        transform: translateX(-50%);
        border: 10rpx solid @color-theme;
        border-bottom-width: 24rpx;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 20rpx;
        height: 20rpx;
        background: @color-theme;
        border-radius: 50%;
      }
    }
  }
}
</style>